<template id="example">
  <div>
    <el-upload
      action=""
      ref="upload"
      :on-exceed="onExceed"
      :on-remove="handleRemove"
      :before-upload="beforUpload"
      :on-change="changeFile"
      :file-list="fileLists"
      :show-file-list="showFileList"
      name="file"
      :list-type="listType"
      :limit="limit"
      :http-request="beforeUploadFile"
      :auto-upload="autoupload"
      :class="[isShowImg ? 'avatar-uploader' : '']"
    >
      <template v-if="isShowImg">
        <img v-if="showImgUrl" :src="showImgUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </template>
      <el-button v-else size="small" :class="['submit', btnType]">
        {{ showText }}
      </el-button>
      <div v-if="showTip" slot="tip" class="tip-content">
        <div v-if="Array.isArray(tipMess)">
          <p v-for="(item, index) in tipMess" :key="index">{{ item }}</p>
        </div>
        <p v-else>{{ tipMess }}</p>
      </div>
    </el-upload>
  </div>
</template>
<script>
  // import APIFile from '@/api/file.js'
  export default {
    props: {
      showFileList: {
        type: Boolean,
        default: true
      },
      data: Object,
      limit: {
        type: Number,
        default: 1
      },
      fileSize: {
        type: Number,
        default: 5
      },
      fileSizeUnit: {
        type: String,
        default: 'M'
      },
      showText: {
        type: String,
        default: '上传'
      },
      fileList: Array,
      currentName: {
        type: String,
        default: ''
      },
      slotTitle: {
        type: String,
        default: ''
      },
      typeList: {
        type: Array,
        default: () => []
      },
      btnType: {
        type: String,
        default: ''
      },
      listType: {
        type: String,
        default: 'text'
      },
      propName: {
        type: String,
        default: ''
      },
      inline: {
        type: Boolean,
        default: true
      },
      isShowImg: {
        type: Boolean,
        default: false
      },
      showTip: {
        type: Boolean,
        default: false
      },
      isNeedUpload: {
        type: Boolean,
        default: false
      },
      tipMess: {
        type: [String, Array],
        default: ''
      },
      showImgUrl: String
    },
    watch: {
      fileList: {
        handler(newFileList) {
          this.fileLists = newFileList
        },
        // 开启深度监听
        deep: true
      }
    },
    data() {
      return {
        autoupload: true,
        fileLists: this.fileList
      }
    },
    methods: {
      changeFile(file) {
        file.currentName = this.currentName
        file.blob = URL.createObjectURL(file.raw)
        this.$emit('changeFile', file)
      },
      beforUpload(file) {
        let regFile = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (this.typeList.length > 0) {
          const isType = this.typeList.indexOf(regFile.toLowerCase()) !== -1
          if (!isType) {
            this.$message.info('文件格式错误！请重新选择。')
            return false
          }
          if (this.fileSizeUnit === 'M') {
            let isLt5M = file.size / 1024 / 1024 < this.fileSize
            if (!isLt5M) {
              this.$message.info(`上传文件大小不能超过 ${this.fileSize}${this.fileSizeUnit}B!`)
              return false
            }
          } else if (this.fileSizeUnit === 'K') {
            let isLt5M = file.size / 1024 < this.fileSize
            if (!isLt5M) {
              this.$message.info(`上传文件大小不能超过 ${this.fileSize}${this.fileSizeUnit}B!`)
              return false
            }
          }
          return true
        } else {
          return true
        }
      },
      // 上传文件
      beforeUploadFile(data) {
        let file = data.file
        var formData = new FormData()
        formData.append('file', file)
        if (this.isNeedUpload) {
          this.$emit('updateFileList', file, this.propName)
          return
        }
        // APIFile.uploadFile(formData)
        //   .then(res => {
        //     if (res.data.code === 200) {
        //       let fileUrl = res.data.data
        //       let obj = {
        //         fileName: file.name,
        //         fileUrl: fileUrl,
        //         uid: file.uid
        //       }
        //       console.log(obj)
        //       this.$emit('updateFileList', obj, this.propName)
        //     } else {
        //       this.fileLists = []
        //       // this.$message({
        //       //   message: '上传文件失败',
        //       //   type: 'error'
        //       // })
        //     }
        //   })
        //   .catch(ret => {
        //     console.log(ret)
        //   })
      },
      clearFile() {
        this.$refs.upload.clearFiles()
      },
      onExceed: function () {
        this.$message.info('只能上传' + this.limit + '个文件!')
      },
      handleRemove() {
        this.$emit('input', '')
        this.$refs.upload.clearFiles()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader {
    display: flex;
  }
  :deep(.el-upload) {
    border: 1px solid rgb(187, 187, 187);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  :deep(.el-upload):hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .tip-content {
    width: 212px;
    line-height: 18px;
    color: #909399;
    font-size: 12px;
    margin-left: 8px;
  }
</style>
